<template>
    <!-- 采购单 -->
    <Hidden_top />
    <Tags />
    <div class="purorder">
        <div class="w">
            <el-container>
                <el-header>采购单</el-header>
                <el-main>
                    <div class="commodities">
                        <div class="goods"><span class="goodSize">采购商品</span></div>
                        <div>
                            <el-table :data="tableData" border style="width: 100%">
                                <el-table-column label="商品名称" width="180">
                                    <el-input v-model="shopform.shopName" />
                                </el-table-column>
                                <el-table-column label="商品分类" width="180">
                                    <el-input v-model="shopform.shopZation" />
                                </el-table-column>
                                <el-table-column label="采购量">
                                    <el-input v-model="shopform.shopEtc" />
                                </el-table-column>
                                <el-table-column label="单位">
                                    <el-input v-model="shopform.shopUnit" />
                                </el-table-column>
                                <el-table-column label="目标单价">
                                    <el-input disabled v-model="shopform.shoPrice" />
                                </el-table-column>
                                <el-table-column label="采购周期">
                                    <el-input v-model="shopform.cyclicality" />
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="requirements">
                        <div class="goods"><span class="goodSize">采购需求</span></div>
                        <div>
                            <div>
                                <el-form :model="form" label-width="120px" :rules="rules">
                                    <el-form-item label="采购类型" prop="resource1">
                                        <el-col :span="5">
                                            <el-radio-group v-model="form.resource1">
                                                <el-radio label="全新" />
                                                <el-radio label="二手或回收" />
                                            </el-radio-group>
                                        </el-col>
                                        <el-col :span="18">
                                            <el-form-item label="是否需要发票" prop="resource2">
                                                <el-radio-group v-model="form.resource2">
                                                    <el-radio label="不需要发票" />
                                                    <el-radio label="增值税专用发票" />
                                                    <el-radio label="增值税普通发票" />
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="收货地址">
                                        <el-row :gutter="20">
                                            <el-col :span="6">
                                                <el-select v-model="form.region1">
                                                    <el-option label="Zone one" value="shanghai" />
                                                    <el-option label="Zone two" value="beijing" />
                                                </el-select>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-select v-model="form.region2">
                                                    <el-option label="Zone one" value="shanghai" />
                                                    <el-option label="Zone two" value="beijing" />
                                                </el-select>
                                            </el-col>
                                            <el-col :span="8">
                                                <span class="actives">可不填，默认为手机号码归属地</span>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                    <el-form-item label="">
                                        <el-input v-model="form.desc" placeholder="请填写备注" type="textarea" />
                                        <span class="actives">填写完善的说明，有助于供应商更好了解您的采购需求，更快完成采购</span>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                    <div class="contacts">
                        <div class="goods"><span class="goodSize">采购联系人</span></div>
                        <div>
                            <div>
                                <el-form :model="ruleForm" label-width="120px" :rules="rules">
                                    <el-form-item label="姓名" prop="name">
                                        <el-row :gutter="20">
                                            <el-col :span="12">
                                                <el-input v-model="ruleForm.name" placeholder="请填写姓名" />
                                            </el-col>
                                            <el-col :span="10">
                                                <el-form-item label="" prop="genders">
                                                    <el-radio-group v-model="ruleForm.genders">
                                                        <el-radio label="先生" />
                                                        <el-radio label="女士" />
                                                    </el-radio-group>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                    <el-form-item label="电话" prop="telephones">
                                        <el-row :gutter="20">
                                            <el-col :span="6">
                                                <el-input v-model="ruleForm.telephones" placeholder="请填写电话" />
                                            </el-col>
                                            <span class="actives">或</span>
                                            <el-col :span="5">
                                                <el-input v-model="ruleForm.area" placeholder="区号" />
                                            </el-col>
                                            <el-col :span="5">
                                                <el-input v-model="ruleForm.private" placeholder="座机号" />
                                            </el-col>
                                            <el-col :span="5">
                                                <span class="actives">至少一个</span>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; justify-content: center; margin-top: 30px;">
                        <el-button type="primary" @click="submitForm">
                            立即发布
                        </el-button>
                    </div>

                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script setup>
import Hidden_top from '@/components/hidden_top/index.vue';
import Tags from '@/components/tags/index.vue';
import { ref, reactive } from 'vue'

let dataLiss = ref({})

// 采购商品
const shopform = reactive({
    shopName: '',
    shopZation: '',
    shopEtc: '',
    shopUnit: '',
    shoPrice: '面议',
    cyclicality: ''
})
const tableData = [
    {
        date: '',
        name: '',
        state: '',
        city: '',
        address: '',
        zip: '',
    }
]

// 采购联系人
const ruleForm = reactive({
    name: '',
    genders: '',
    telephones: '',
    area: '',
    private: ''
})

// 采购需求
const form = reactive({
    resource1: '',
    resource2: '',
    region1: '',
    region2: '',
})

const rules = reactive({
    resource1: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    resource2: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    telephones: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ]
})

const submitForm =  () => {
    dataLiss = {...shopform,...ruleForm,...form}
    console.log(dataLiss)
}
</script>
<style lang="scss" scoped>
.w {
    width: 75vw;
    margin: 0 auto;
}

.purorder {
    height: 50vw;
    background-color: #F6F6F6;
}

.actives {
    color: #C7CBD3;
}

.el-header {
    height: 5.625vw;
    background-color: #FFFFFF;
    text-align: center;
    line-height: 5.625vw;
    font-size: 38px;
    color: #333333;
}

.el-table {

    .cell {
        text-align: center;
    }
}

.el-table th.el-table__cell {
    background-color: #ECF4FF !important;
    color: #333;
}

.el-main {
    height: 44vw;
    background-color: #FFFFFF !important; 
    .commodities {
        .goods {
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 3px solid #2270D7;

            .goodSize {
                font-size: 16px;
                font-weight: 700;
                color: #333333;
            }
        }
    }

    .requirements {
        margin-top: 30px;

        .goods {
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 3px solid #2270D7;

            .goodSize {
                font-size: 16px;
                font-weight: 700;
                color: #333333;
            }
        }
    }

    .contacts {
        margin-top: 30px;

        .goods {
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 3px solid #2270D7;

            .goodSize {
                font-size: 16px;
                font-weight: 700;
                color: #333333;
            }
        }
    }

}
</style>
